<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
        padding: 0px;
        margin: 0px;
        }

        body {
        width: 100%;
        font-family: fantasy;
        font-size: 13px;
        }

        h1 {
        text-align: center;
        }

        #myDiv {
        margin-top: 50px;
        width: 100%;
        text-align: center;
        }

        table {
        margin-left: auto;
        margin-right: auto;
        }

    </style>
    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
    <script src="/js/jquery-1.8.0.min.js"></script>
    <script src="/js/jquery.cookie.js"></script>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
    }

</script>

<h1>Push Test</h1>

<form id="myDiv">
    <table cellspacing="10" cellpadding="0" width="400">

        <tr align=left>
            <td width="100" align=right>json</td>
            <td width="300" colspan="3"><textarea id="data" name="data" cols="40" rows="4"
                                                  placeholder="内容输入框" value=""></textarea></td>
        </tr>

        <tr align=left>
            <td width="100" align=right>topic :</td>
            <td width="300" colspan="3"><input id="topic" name="topic" type="text"></td>
        </tr>

        <tr align=left id="pushIdDiv">
            <div id="pushIdText">
                <td width="100" align=right>pushId: &nbsp&nbsp&nbsp</td>
                <td width="300" colspan="3"><textarea id="pushId" name="pushId" cols="40" rows="4"
                                                      placeholder="多个Id换行分开" value=""></textarea>
                </td>
            </div>
        </tr>
        <tr align=left id="pushUidDiv">
            <div id="pushUidText">
                <td width="100" align=right>uid: &nbsp&nbsp&nbsp</td>
                <td width="300" colspan="3"><textarea id="uid" name="uid" cols="40" rows="4"
                                                      placeholder="多个Id换行分开" value=""></textarea>
                </td>
            </div>
        </tr>

        <tr align=left id="ttlDiv">
            <div id="timeToLiveDiv">
                <td width="100" align=right>timeToLive: &nbsp&nbsp&nbsp</td>
                <td width="300" colspan="3"><input id="timeToLive" name="timeToLive" value=""/></td>
            </div>
        </tr>

        <tr align=left style="display:none;">
            <td width="400"><input id="notification" name="notification" type="hidden"></td>
        </tr>

        <tr align=right>
            <td width="400" colspan=4 align="center"><input type="button" onclick="ajaxTest()"
                                                            value="推送"/></td>
        </tr>
        <tr></tr>
        <tr>
            <td width="400" colspan="4" align="center"><font size="5" color="green"
                                                             id="result"></font></td>
        </tr>

    </table>
</form>
<br/>
<a id="url"></a>

</div>
<script>

    function cleanArray(array, deleteValue) {
        for (var i = 0; i < array.length; i++) {
            if (array[i] == deleteValue) {
                array.splice(i, 1);
                i--;
            }
        }
        return array;
    }

    function ajaxTest() {
        var radio = document.getElementsByName("type");
        for (var i = 0; i < radio.length; i++) {
            if (radio[i].checked) {
                var radioValue = radio[i].value;
                if (radioValue == "no" && $("#pushId").val() == "" && $("#uid").val() == "") {
                    alert("pushId和uid不能都为空");
                    return false;
                }
            }
        }
//        var topic = $("#topic").val();
//        if (topic == "") {
//            alert("topic 不能为空");
//            return false;
//        }
        var data = $("#data").val();
        if (data == "") {
            alert("data 不能为空");
            return false
        }

        var str = JSON.stringify(data);

        var pushIds = ($("#pushId").val()).split("\n");
        pushIds = cleanArray(pushIds, "");

        var uids = ($("#uid").val()).split("\n");
        uids = cleanArray(uids, "");

        var uri = $('input[name=uri]:checked').val();

        var para = {
            pushId: pushIds,
            pushAll: pushAll,
            topic: $("#topic").val(),
            uid: uids,
            json: $("#data").val(),
            timeToLive: $("#timeToLive").val()
        };

        $.ajax({
            type: 'GET',
            url: "https://" + window.location.hostname + ":" + $.cookie("api_port") + "/api/push",
            data: para,
            success: function (data) {
                document.getElementById("result").innerHTML = JSON.stringify(data);
                $('#url').attr('href', this.url);
                $("#url").text(this.url);
            },
            error: function (data) {
                document.getElementById("result").innerHTML = JSON.stringify(data);
                $('#url').attr('href', this.url);
                $("#url").text(this.url);
            }
        });
    }

    $("#pushId").bind('input propertychange', function () {
        $("#uid").val("");
    });

    $("#uid").bind('input propertychange', function () {
        $("#pushId").val("");
    });

    function utf8_to_b64( str ) {
        return window.btoa(unescape(encodeURIComponent( str )));
    }


</script>

</body>
</html>